<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>黑马程序员论坛详情页</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common-new.css"/>
    <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    <link rel="stylesheet" type="text/css" href="../css/search.css"/>
    <link rel="stylesheet" type="text/css" href="../css/detail.css"/>
    <link rel="stylesheet" type="text/css" href="../css/getArticle.css"/>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/hm-bbs.js"></script>
</head>
<body>
<div id="app">
    <!-- 头部 -->
    <div class="hm-top-nav">
        <div class="hm-inner clearfix">
            <div class="hm-inner-l l">
            </div>
            <div class="hm-inner-r r">
                <div class="box">
                    欢迎<a href="user_info.html" style="margin-right:0px;padding:0px 5px;color:blue;">scott</a>回来！
                    <a href="#">【注销】</a>
                    <div id="dialogBg"></div>
                    <div id="dialog" class="animated">
                        <img class="dialogIco" width="50" height="40" src="../images/ico.png"/>
                        <div class="dialogTop" style="height:25px;">
                            <a href="javascript:;" class="closeDialogBtn">关闭</a>
                        </div>
                        <form action="" method="post">
                            <ul class="editInfos">
                                <li>用户名：<input type="text" id="userName" name="userName" class="ipt"/></li>
                                <li>密&nbsp;&nbsp;&nbsp;码：<input type="password" id="userPass" name="userPass"
                                                                class="ipt"/></li>
                                <li><input type="submit" value="登录" class="submitBtn"/></li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="hm-header"></div>
    <div class="hm-body hm-body-bgc">
        <div class="hm-inner">

            <!--帖子标题，点赞数，回复数，搜索-->
            <div class="hm-bbs-info">
                <div class="hm-bbs-icon l" style="width:130px;">
                    <span><img src="../images/bbs-icon.png" height="80"/></span>
                </div>
                <div class="hm-bbs-info-in l" style="margin-left:30px;">
                    <div class="t clearfix">
                        <h2 class="l">{{article.title}}</h2>
                        <div class="hm-detail-fun l">
					     <span class="icon-like">
					         <a href="#"><i></i>{{article.upvotecount}}</a>
					     </span>
                            <span class="icon-talk">
						     <i></i>{{article.browsecount}}
						</span>
                        </div>
                    </div>
                </div>
                <div class="search-box l">
                    <form action="javascript:;">
                        <input type="text" class="txt l" placeholder="请输入关键字">
                        <input type="button" value="搜索" class="btn l"/>
                    </form>
                </div>
            </div>


            <!--导航，回首页，帖子标题，排序-->
            <div class="detail-page-box clearfix">
                <a href="index.html">
                    <i class="hm-ico-home"></i>首页
                </a>
                <span>></span>
                <a href="#">{{title}}</a>
                <a class="new-to-old r" href="" style="font-size:12px;float: right;">
                    <i></i>从新到旧查看
                </a>
            </div>


            <div class="detail-box">
                <ul class="detail-floors">

                    <!--原帖楼-->
                    <li class="floor clearfix">
                        <div class="floorer-info l">
                            <div class="floorer-photo"><img src="../images/default.png"/></div>
                            <div class="floorer-name">{{article.sendername}}</div>
                        </div>
                        <div class="floor-con l">
                            <div class="floor-info clearfix">
                                <div class="floor-time l">发帖时间：{{article.sendtime}}</div>
                                <div class="r">{{article.browsecount}}次查看</div>
                            </div>
                            <div class="floor-art-ans">
                                <div class="floor-art">
                                    <p>{{article.content}}</p>
                                </div>
                                <div class="floor-ans"></div>
                            </div>
                            <span class="icon-comment">
                                <a href="javascript:alert('请先登录！')"> <i></i> 评论</a>
                                <a href="javascript:void(0)" @click="isUpvote()"> <i id="id1"></i> 点赞</a>
                                 <a href="javascript:;" onclick="showDialog1(1)"> <i id="id2"></i> 举报</a>
                          </span>
                        </div>
                    </li>


                    <!-- 评论部分,一楼及以后 -->
                    <li class="floor clearfix" v-for="comment,index in commentList">
                        <div class="floorer-info l">
                            <div class="floorer-photo"><img src="../images/default.png"/></div>
                            <div class="floorer-name">{{comment.commentusername}}</div>
                        </div>
                        <div class="floor-con l">
                            <div class="floor-info clearfix">
                                <div class="floor-time l">回贴时间：{{new Date(comment.commenttime).Format("yyyy-MM-dd hh:mm:ss")}}</div>
                                <div class="r" >{{index+1}}楼</div>
                            </div>
                            <div class="floor-art-ans">
                                <div class="floor-art">
                                    <p>{{comment.commentcontent}}</p>
                                </div>
                                <div class="floor-ans">
                                    <!--v-model="commentid=comment.commentid"-->
                                    <ul v-for="replys,index in replyList">
                                        <ul v-for="reply,index in replys">
                                        <!-- 回复部分,楼中楼 -->
                                        <li class="clearfix" v-if="comment.commentid==reply.commentid" >
                                            <div class="floor-ans-pho l"><img src="../images/default.png"/></div>
                                            <div class="floor-ans-con l">
                                                <span class="name">{{reply.replyusername}}</span>：{{reply.replycontent}}
                                                <span class="ans-time">{{new Date(reply.replytime).Format("yyyy-MM-dd hh:mm:ss")}}</span>
                                            </div>
                                        </li>
                                        </ul>

                                    </ul>
                                </div>
                                <span class="icon-feedback">
                                <a href="javascript:;" onclick="showDialog(1)"> <i></i> 回复</a>
                            </span>
                            </div>
                        </div>
                    </li>


                    <!--发表评论-->
                    <div class="detail-to-comment">
                        <div class="tit"><a name="comment">发表评论</a></div>
                        <!-- 未登录时候显示 <div class="con">您没有登录论坛，请登录后再进行回复</div>-->

                        <!-- 登录后显示评论输入框-->
                        <form action="#" method="post">
                            <div class="con con-loged">
                                <div class="con-t">
                                    <textarea id="content" name="content" placeholder="请在此输入您要回复的信息"></textarea>
                                </div>
                                <div class="con-b">
                                    <input type="submit" class="btn"/>
                                    <span class="num">不能超过5000字</span>
                                </div>
                            </div>
                        </form>
                    </div>
            </div>
        </div>


        <!-- 底部 -->
        <div class="hm-footer" style="padding-top:10px;">
            <div class="hm-inner">
                <div class="hm-footer-cpr">
                    <p>Copyright@2006-2017 ITCAST. All Rights Reserved</p>
                    <p>传智播客 版权所有</p>
                </div>
            </div>
        </div>
        <!-- 举报弹出框 -->
        <form action="##" method="post">
            <div class="pop-box1 ft-box">
                <div class="mask"></div>
                <div class="win" >
                    <div class="win_hd">
                        <h4 class="l">举报<span ></span>帖子</h4>
                        <span class="close r">&times;</span>
                    </div>
                    <div class="win_bd">
                        <div class="win_bd_b">
                            <textarea  name="content" placeholder="举报内容限于40字以内" v-model="reportContent"></textarea>
                        </div>
                    </div>
                    <div class="win_ft">
                        <div class="win_ft_in">
                            <input type="submit" @click="add(articleId=article.articleid,reportContent)" class="btn" value="举报"/>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- 回复弹出框 -->
        <form action="" method="post">
            <div class="pop-box ft-box">
                <div class="mask"></div>
                <div class="win">
                    <div class="win_hd">
                        <h4 class="l">回复<span id="floorSpan"></span>楼</h4>
                        <span class="close r">&times;</span>
                    </div>
                    <div class="win_bd">
                        <div class="win_bd_b">
                            <textarea id="replyContent" name="content" placeholder="回复内容限于40字以内"></textarea>
                        </div>
                    </div>
                    <div class="win_ft">
                        <div class="win_ft_in">
                            <input type="submit" class="btn" value="回复"/>
                        </div>
                    </div>
                </div>
            </div>
        </form>


        <div class="fixedBar" id="j_fixedBar">
            <a href="#comment" class="newTopic"><span></span>回复</a>
            <a href="#" class="goTop"><i></i><span>返回<br/>顶部</span></a>
        </div>

    </div>
</div>
</body>

<script type="text/javascript">
    //弹出回复框
    function showDialog(num) {
        $('.pop-box').css('display', 'block');
        $("#floorSpan").html(num);
    }
    //弹出回复框
    function showDialog1(num) {
        $('.pop-box1').css('display', 'block');
        $("#floorSpan").html(num);
    }
</script>

<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/util.js"></script>
<script src="../js/elementui.js"></script>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                article: {},
                commentList: [],
                title:"",//标题
                replymap:{},//楼中楼
                commentid:0,
                replyList:[],
                code:8,
                articleId:0,
                formVisible:false
            }
        },
        created() {
            this.findArticle();
            this.findComment();
            // this.findReply(this.commentid);
        },
        methods: {
            findArticle() {
                this.article.articleid = getQueryString("articleid");
                axios.get(`/web/article/findById.do?articleid=${this.article.articleid}`).then(response => {
                    this.article = response.data;
                    this.title=response.data.title;
                    this.article.sendtime = new Date(this.article.sendtime).Format("yyyy-MM-dd hh:mm:ss");
                })
            },
            findComment() {
                axios.get(`/web/comment/findByArticleId.do?articleId=${this.article.articleid}`).then(response => {
                    this.commentList = response.data;
                    // this.list.size=this.commentList.length;

                    // alert(this.replyList)
                    for (let i = 0; i < this.commentList.length; i++) {
                        let commentId = this.commentList[i].commentid;
                        // alert(commentId)
                        // let commentId1 = commentId;
                        this.findReply(commentId)
                    }
                    // alert(this.replyList.length)
                    // this.comment.commenttime = new Date(this.comment.commenttime).Format("yyyy-MM-dd hh:mm:ss");
                })
            },
            findReply(commentId) {
                // alert(commentId);
                axios.get(`/web/reply/findReplyByCommentId.do?commentid=${commentId}`).then(response => {
                    this.replyList.push(response.data);
                    // alert(this.replyList.length)
                    // list.add(this.replymap)
                    // alert(this.replymap)
                    // this.comment.commenttime = new Date(this.comment.commenttime).Format("yyyy-MM-dd hh:mm:ss");
                })
            },
            isUpvote(){
                if (this.article.isupvote==0){
                    this.article.isupvote=1;
                } else {
                    this.article.isupvote=0;
                }
                axios.get(`/web/upvote/isUpvote.do?articleid=${this.article.articleid}&isupvote=${this.article.isupvote}`).then(response => {
                    if (response.data.code==403){
                        alert("请先登录");
                    }
                })
            },
            add(articleId,reportContent){
                let reportMap = {"articleId":articleId,"reportContent":reportContent}
                axios.post(`/web/getReport/add.do`,reportMap).then(response=>{
                    this.code=response.data.code;
                    if(this.code==1){
                        alert(response.date.message)
                        // location.href=`index.html`;
                    }
                })
            }
        }
    })

</script>
</html>